import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:like_button/like_button.dart';
import 'package:live_music/components/ui/theme.dart';
import 'package:live_music/models/moment_detail_model.dart';
import 'package:live_music/pages/detail/moment_detail.dart';
import 'package:live_music/pages/video/video_and_user_page.dart';
import 'package:live_music/services/operationServiece.dart';
import 'package:live_music/utils/cgq_utils.dart';
import 'package:live_music/utils/colors.dart';

class VideoIndexCard extends StatefulWidget {
  final MomentDetailModel momentListItem;
  final int index;
  final Function toSingleVideoListPage;
  String type;
  VideoIndexCard(
      {Key key,
      this.momentListItem,
      this.index,
      this.type,
      this.toSingleVideoListPage})
      : super(key: key);

  @override
  _VideoIndexCardState createState() => _VideoIndexCardState();
}

class _VideoIndexCardState extends State<VideoIndexCard>
    with SingleTickerProviderStateMixin {
  MomentDetailModel _momentListItem;
  @override
  void initState() {
    super.initState();
    setState(() {
      _momentListItem = widget.momentListItem;
    });
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => {
        if (widget.type == "fromUserList")
          {widget.toSingleVideoListPage?.call(widget.index)}
        else
          {
            if (_momentListItem.type == "VIDEO")
              {Get.to(VideoAndUserPage(momentListItem: _momentListItem))}
            else
              {Get.to(MomentDetailPage(id: _momentListItem.id))}
          }
      },
      child: Container(
          child: Column(children: [
        Stack(fit: StackFit.loose, children: [
          Container(
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(4), topRight: Radius.circular(4)),
              child: CgqUtils.imageCache(
                _momentListItem.type == "VIDEO"
                    ? _momentListItem.video.coverUrl
                    : _momentListItem.imageList[0].url,
                fit: BoxFit.fitWidth,
              ),
            ),
          ),
          _momentListItem.type == "VIDEO"
              ? Positioned(
                  top: 12,
                  right: 12,
                  child: Container(
                      width: 24,
                      height: 24,
                      child: Image.asset(
                        'assets/images/icons/playCircle.png',
                        width: 12,
                        height: 12,
                      )),
                )
              : Container(),
        ]),
        _momentListItem.type == "VIDEO" || _momentListItem.textContent != ""
            ? Container(
                margin: const EdgeInsets.only(top: 6),
                padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                alignment: Alignment.centerLeft,
                child: Text(
                    _momentListItem.type == "VIDEO"
                        ? _momentListItem.video.title
                        : _momentListItem.textContent,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: WcaoTheme.base,
                    )))
            : Container(),
        Container(
          margin: const EdgeInsets.only(top: 6, bottom: 6),
          padding: EdgeInsets.symmetric(horizontal: 8),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  SizedBox(
                    width: 24,
                    height: 24,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(24),
                      child: CgqUtils.imageCache(_momentListItem.userAvatarUrl,
                          fit: BoxFit.cover),
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(left: 8),
                    child: Text(
                      _momentListItem.userName,
                      style: TextStyle(
                          color: WcaoTheme.secondary, fontSize: WcaoTheme.fsSm),
                    ),
                  ),
                ],
              ),
              Row(
                children: [
                  LikeButton(
                      isLiked: _momentListItem.hasLiked,
                      onTap: (isLiked) {
                        return onTapLikeButton(!isLiked);
                      },
                      size: 20,
                      circleColor: CircleColor(
                          start: ColorRes.color_3, end: ColorRes.color_3),
                      likeBuilder: (isLike) {
                        return isLike == true
                            ? Image.asset('assets/images/common/red_heart.webp')
                            : Icon(
                                Icons.favorite_border_outlined,
                                size: 20,
                                color: WcaoTheme.secondary,
                              );
                      },
                      bubblesColor: const BubblesColor(
                        dotPrimaryColor: ColorRes.color_3,
                        dotSecondaryColor: ColorRes.color_3,
                        dotThirdColor: ColorRes.color_3,
                        dotLastColor: ColorRes.color_3,
                      )),
                  Text(
                    _momentListItem.likeCount.toString(),
                    style: TextStyle(color: WcaoTheme.secondary),
                  ),
                ],
              ),
            ],
          ),
        )
      ])),
    );
  }

  Future<bool> onTapLikeButton(bool isLiked) async {
    _momentListItem.hasLiked = isLiked;
    if (isLiked) {
      _momentListItem.likeCount++;
    } else {
      _momentListItem.likeCount--;
    }
    Map<String, dynamic> data = {
      "targetId": _momentListItem.id,
      "targetType": 'MOMENT',
    };
    if (isLiked) {
      await OperationServiece.like(data);
    } else {
      await OperationServiece.cancelLike(data);
    }
    setState(() {
      _momentListItem = _momentListItem;
    });
    return isLiked;
  }
}
